<template>
  <view class="container">
    <!-- 组织者 -->
    <view class="originzer">
      <view style="font-weight: 500; font-size: 28rpx; color: #333333">组织者</view>
      <view @click="change(1)">
        <radio :checked="originzer == 1" style="transform: scale(0.7)" color="#FEFF01" />
        <text>我是玩家</text>
      </view>

      <view @click="change(2)">
        <radio :checked="originzer == 2" style="transform: scale(0.7)" color="#FEFF01" />
        <text>我是商家</text>
      </view>
    </view>
    <!-- 活动场地 -->
    <view class="originzer">
      <view style="font-weight: 500; font-size: 28rpx; color: #333333">组织者</view>
      <view @click="place = 1">
        <radio :checked="place == 1" style="transform: scale(0.7)" color="#FEFF01" />
        <text>室内活动</text>
      </view>
      <view @click="place = 2">
        <radio :checked="place == 2" style="transform: scale(0.7)" color="#FEFF01" />
        <text>室外活动</text>
      </view>
    </view>
    <!-- 活动标题 -->
    <view class="pad" style="display: flex; align-items: center; justify-content: space-between; background: #f8f8f8; border-radius: 16rpx 16rpx 16rpx 16rpx; margin-bottom: 24rpx">
      <view style="font-weight: 500; font-size: 28rpx; color: #333333">活动标题</view>
      <input type="text" v-model="title" style="flex: 1; text-align: right; padding-left: 50rpx; font-weight: 400; font-size: 28rpx; color: #666666" placeholder="请输入活动标题" />
    </view>
    <!-- 活动苗叔  -->
    <view
      class="pad"
      style="
        box-sizing: border-box;
        width: 690rpx;
        height: 340rpx;
        background: #f8f8f8;
        border-radius: 16rpx 16rpx 16rpx 16rpx;
        position: relative;
        top: 0;
        left: 0;
        margin-bottom: 26rpx;
      "
    >
      <view style="font-weight: 500; font-size: 28rpx; color: #333333">活动描述</view>
      <textarea v-model="content" style="font-weight: 400; font-size: 28rpx; color: #666666; margin-top: 16rpx" maxlength="200" placeholder="请用文字简单描述活动内容"></textarea>
      <view style="font-weight: 400; font-size: 24rpx; color: #cccfdb; position: absolute; bottom: 28rpx; right: 24rpx">{{ content.length }}/200</view>
    </view>
    <!-- 活动照片 -->
    <view class="pad" style="background: #f8f8f8; border-radius: 16rpx 16rpx 16rpx 16rpx; margin-bottom: 38rpx">
      <view>
        <text style="font-weight: 500; font-size: 28rpx; color: #333333">活动照片</text>
        <text style="font-weight: 400; font-size: 24rpx; color: #666666">(最多上传9张)</text>
      </view>
      <view style="font-weight: 400; font-size: 28rpx; color: #666666">温馨提示:请上传与发布活动相关的照片</view>
      <view style="margin-top: 20rpx">
        <cl-upload
          v-model="urls"
          :action="url"
          :headers="{
            token: token
          }"
          fileType="image"
          :closeImg="true"
          fileName="file"
          :useBeforeDelete="true"
          @beforeDelete="beforeDelete"
          @onSuccess="onSuccess"
        ></cl-upload>
        <!-- <image src="../../static/upload.png" v-for="index in 7" style="width: 200rpx; height: 200rpx; margin: 5rpx" mode=""></image> -->
      </view>
    </view>
    <!-- 活泼类型 -->
    <view
      @click="$refs.acttype.open()"
      style="display: flex; align-items: center; justify-content: space-between; height: 96rpx; background: #f8f8f8; border-radius: 16rpx 16rpx 16rpx 16rpx; padding: 0rpx 25rpx"
    >
      <view style="font-weight: 500; font-size: 28rpx; color: #333333">活动类型</view>
      <view style="font-weight: 400; font-size: 28rpx; color: #666666; display: flex; align-items: center">
        {{ huodogItme.title || '请选择活动类型' }}
        <uni-icons type="right" size="20"></uni-icons>
      </view>
    </view>
    <!-- 开始时间 -->
    <view
      @click="$refs.starttime.open()"
      style="
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0rpx 25rpx;
        height: 96rpx;
        background: #f8f8f8;
        border-radius: 16rpx 16rpx 16rpx 16rpx;
        margin: 24rpx 0;
      "
    >
      <view style="font-weight: 500; font-size: 28rpx; color: #333333">开始时间</view>
      <view style="font-weight: 400; font-size: 28rpx; color: #666666; display: flex; align-items: center">
        {{ starttime || '请选择时间' }}
        <uni-icons type="right" size="20"></uni-icons>
      </view>
    </view>
    <!-- 结束时间 -->
    <view
      style="display: flex; align-items: center; justify-content: space-between; height: 96rpx; background: #f8f8f8; border-radius: 16rpx 16rpx 16rpx 16rpx; padding: 0rpx 25rpx"
      @click="$refs.endtime.open()"
    >
      <view style="font-weight: 500; font-size: 28rpx; color: #333333">结束时间</view>
      <view style="font-weight: 400; font-size: 28rpx; color: #666666; display: flex; align-items: center">
        {{ endtime || '请选择时间' }}
        <uni-icons type="right" size="20"></uni-icons>
      </view>
    </view>
    <!-- 详细地址 -->
    <view class="pad" style="height: 260rpx; background: #f8f8f8; border-radius: 16rpx 16rpx 16rpx 16rpx; margin-top: 24rpx">
      <view style="font-weight: 500; font-size: 28rpx; color: #333333">详细地址</view>
      <textarea
        v-model="address"
        placeholder="请输入详细地址:如道路/门牌号/小区/楼栋号等"
        style="font-weight: 400; font-size: 28rpx; color: #666666; margin-top: 16rpx; height: 200rpx"
      ></textarea>
    </view>
    <!-- 参与人形式 -->
    <view
      @click.stop="$refs.attendpeople.open()"
      style="
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: 96rpx;
        background: #f8f8f8;
        border-radius: 16rpx 16rpx 16rpx 16rpx;
        margin-top: 24rpx;
        padding: 0rpx 25rpx;
      "
    >
      <view style="font-weight: 500; font-size: 28rpx; color: #333333">参与人形式</view>
      <view style="font-weight: 400; font-size: 28rpx; color: #666666; text-align: center; display: flex; align-items: center">
        <text>{{ shape || '请选择参与人' }}</text>
        <uni-icons type="right" size="20"></uni-icons>
      </view>
    </view>
    <!-- 参与人数 -->
    <view
      style="
        height: 96rpx;
        background: #f8f8f8;
        border-radius: 16rpx 16rpx 16rpx 16rpx;
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-top: 24rpx;
        padding: 0rpx 25rpx;
      "
    >
      <view style="font-weight: 500; font-size: 28rpx; color: #333333">参与人数</view>
      <!-- 输入人数 -->
      <view style="display: flex; align-items: center">
        <text style="font-weight: 500; font-size: 28rpx; color: #333333">女</text>
        <input type="number" placeholder="请输入" v-model="nvnum" @blur="limitnvnum" style="width: 100rpx; text-align: right; font-weight: 400; font-size: 28rpx; color: #666666" />
        <text style="font-weight: 500; font-size: 28rpx; color: #333333">人</text>
      </view>
      <!-- 输入人数 -->
      <view style="display: flex; align-items: center">
        <text style="font-weight: 500; font-size: 28rpx; color: #333333">男</text>
        <input
          type="number"
          placeholder="请输入"
          v-model="nannum"
          @blur="limitnannum"
          style="width: 100rpx; text-align: right; font-weight: 400; font-size: 28rpx; color: #666666"
        />
        <text style="font-weight: 500; font-size: 28rpx; color: #333333">人</text>
      </view>
    </view>
    <!-- 站位盒子 -->
    <view style="height: 300rpx"></view>
    <!-- 创建活动按钮 -->
    <view class="btn">
      <view class="creatact" @click="addHuoDong">创建活动</view>
    </view>
    <!-- 开始时间弹框 -->
    <uni-popup ref="starttime" type="bottom">
      <view class="starttime">
        <view style="display: flex; align-items: center; justify-content: space-around">
          <view></view>
          <view style="font-weight: bold; font-size: 32rpx; color: #333333; margin-left: 40rpx">开始时间</view>
          <uni-icons type="closeempty" size="20" @click="$refs.starttime.close()"></uni-icons>
        </view>
        <picker-view :indicator-style="indicatorStyle" :value="value" @change="starttimechange" class="picker-view">
          <picker-view-column>
            <view class="item" v-for="(item, index) in year" :key="index">{{ item }}</view>
          </picker-view-column>
          <picker-view-column>
            <view class="item" v-for="(item, index) in h" :key="index">{{ item }}</view>
          </picker-view-column>
          <picker-view-column>
            <view class="item" v-for="(item, index) in m" :key="index">{{ item }}</view>
          </picker-view-column>
        </picker-view>
        <view
          style="
            width: 690rpx;
            height: 80rpx;
            background: #feff01;
            border-radius: 20rpx 20rpx 20rpx 20rpx;
            text-align: center;
            line-height: 80rpx;
            font-weight: bold;
            font-size: 32rpx;
            color: #151515;
            margin: 30rpx;
          "
          @click="setstarttime"
        >
          确定
        </view>
      </view>
    </uni-popup>
    <!-- 结束时间弹框 -->
    <uni-popup ref="endtime" type="bottom">
      <view class="endtime">
        <view style="display: flex; align-items: center; justify-content: space-around">
          <view></view>
          <view style="font-weight: bold; font-size: 32rpx; color: #333333; margin-left: 40rpx">结束时间</view>
          <uni-icons type="closeempty" size="20" @click="$refs.endtime.close()"></uni-icons>
        </view>
        <picker-view :indicator-style="indicatorStyle" :value="endvalue" @change="endtimechange" class="picker-view">
          <picker-view-column>
            <view class="item" v-for="(item, index) in year" :key="index">{{ item }}</view>
          </picker-view-column>
          <picker-view-column>
            <view class="item" v-for="(item, index) in h" :key="index">{{ item }}</view>
          </picker-view-column>
          <picker-view-column>
            <view class="item" v-for="(item, index) in m" :key="index">{{ item }}</view>
          </picker-view-column>
        </picker-view>
        <view
          style="
            width: 690rpx;
            height: 80rpx;
            background: #feff01;
            border-radius: 20rpx 20rpx 20rpx 20rpx;
            text-align: center;
            line-height: 80rpx;
            font-weight: bold;
            font-size: 32rpx;
            color: #151515;
            margin: 30rpx;
          "
          @click="setendtime"
        >
          确定
        </view>
      </view>
    </uni-popup>
    <!-- 活动类型 -->
    <uni-popup ref="acttype" type="bottom">
      <view class="acttype">
        <view style="display: flex; align-items: center; justify-content: space-around">
          <view></view>
          <view style="font-weight: bold; font-size: 32rpx; color: #333333; margin-left: 40rpx">活动类型</view>
          <uni-icons type="closeempty" size="20" @click="$refs.acttype.close()"></uni-icons>
        </view>
        <picker-view :indicator-style="indicatorStyle" :value="acttypevalue" @change="acttypechange" class="picker-view">
          <picker-view-column>
            <view class="item" v-for="(item, index) in acttype" :key="index">{{ item }}</view>
          </picker-view-column>
        </picker-view>
        <view
          style="
            width: 690rpx;
            height: 80rpx;
            background: #feff01;
            border-radius: 20rpx 20rpx 20rpx 20rpx;
            text-align: center;
            line-height: 80rpx;
            font-weight: bold;
            font-size: 32rpx;
            color: #151515;
            margin: 30rpx;
          "
          @click="setacttype"
        >
          确定
        </view>
      </view>
    </uni-popup>
    <!-- 参与人 -->
    <uni-popup ref="attendpeople" type="bottom">
      <view class="attendpeople">
        <view style="display: flex; align-items: center; justify-content: space-around">
          <view></view>
          <view style="font-weight: bold; font-size: 32rpx; color: #333333; margin-left: 40rpx">参与人</view>
          <uni-icons type="closeempty" size="20" @click="$refs.attendpeople.close()"></uni-icons>
        </view>
        <picker-view :indicator-style="indicatorStyle" :value="shapevalue" @change="shapevaluechange" class="picker-view">
          <picker-view-column>
            <view class="item" v-for="(item, index) in attendtype" :key="index">{{ item }}</view>
          </picker-view-column>
        </picker-view>
        <view
          style="
            width: 690rpx;
            height: 80rpx;
            background: #feff01;
            border-radius: 20rpx 20rpx 20rpx 20rpx;
            text-align: center;
            line-height: 80rpx;
            font-weight: bold;
            font-size: 32rpx;
            color: #151515;
            margin: 30rpx;
          "
          @click="setshape"
        >
          确定
        </view>
      </view>
    </uni-popup>
  </view>
</template>

<script>
import { mapState } from 'vuex';
export default {
  data() {
    return {
      acttypevalue: [0],
      shapevalue: [0],
      value: [0, 0, 0],
      endvalue: [0, 0, 0],
      originzer: 1,
      attendtype: ['男女参加', '仅限男生', '仅限女生'],
      indicatorStyle: `height: 50px;`,
      place: 1,
      acttype: [],
      year: [],
      h: ['00', '01', '02', '03', '04', '05', '06', '07', '08', '09', 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24],
      m: [
        '00',
        '01',
        '02',
        '03',
        '04',
        '05',
        '06',
        '07',
        '08',
        '09',
        10,
        11,
        12,
        13,
        14,
        15,
        16,
        17,
        18,
        19,
        20,
        21,
        22,
        23,
        24,
        25,
        26,
        27,
        28,
        29,
        30,
        31,
        32,
        33,
        34,
        35,
        36,
        37,
        38,
        39,
        40,
        41,
        42,
        43,
        44,
        45,
        46,
        47,
        48,
        49,
        50,
        51,
        52,
        53,
        54,
        55,
        56,
        57,
        58,
        59,
        60
      ],
      title: '',
      content: '',
      url: '',
      //上传的图片地址列表
      urls: [],
      banurl: [],
      huodongList: [], //活动类型列表
      starttime: '', //开始时间
      endtime: '', //结束时间
      huodogItme: '', //选中的活动类型
      address: '', //详细地址
      shape: '', //参与人形似
      nannum: 0, //男数量
      nvnum: 0 //女数量
    };
  },
  computed: {
    ...mapState(['token'])
  },
  onLoad() {
    let dates = this.getNext30Days();
    dates.forEach((date) => {
      let year = date.getFullYear();
      let month = date.getMonth() + 1; // 月份是从0开始的，所以要加1
      let day = date.getDate();
      month = month < 10 ? '0' + month : month;
      day = day < 10 ? '0' + day : day;
      console.log(`${year}-${month}-${day}`);
      this.year.push(`${year}-${month}-${day}`);
    });
    this.url = this.$uploadUrl;
    this.getdoingscate();
  },
  methods: {
    change(index) {
      console.log(index);
      this.originzer = index;
    },
    // 校验女人数
    limitnvnum() {
      if (this.nvnum > 50) {
        this.nvnum = '';
        return uni.showToast({
          title: '人数上限为50人',
          icon: 'none'
        });
      }
    },
    // 校验男人数
    limitnannum() {
      if (this.nannum > 50) {
        this.nannum = '';
        return uni.showToast({
          title: '人数上限为50人',
          icon: 'none'
        });
      }
    },
    shapevaluechange(e) {
      console.log(e.detail.value);
      this.shapevalue = e.detail.value;
    },
    setshape() {
      this.shape = this.attendtype[this.shapevalue[0]];
      this.$refs.attendpeople.close();
    },
    //选择图片
    beforeDelete(item, index, next) {
      this.banurl.splice(index, 1);
      this.urls.splice(index, 1);
    },
    onSuccess(e) {
      console.log('上传成功', e);
      if (e.code == 1) {
        this.banurl.push(e.data.url);
        this.urls.push(e.data.fullurl);
      } else {
        uni.showToast({
          title: e.msg
        });
      }
    },
    //创建活动
    addHuoDong() {
      let allnum = 0;
      if (!this.shape) {
        return uni.showToast({
          title: '请选择参与人形式',
          icon: 'none'
        });
      }
      if (this.shape == '男女参加') {
        allnum = Number(this.nannum) + Number(this.nvnum);
      } else if (this.shape == '仅限男生') {
        if (this.nvnum != 0) {
          return uni.showToast({
            title: '参与人数仅限男生',
            icon: 'none'
          });
        }
        allnum = Number(this.nannum);
      } else if (this.shape == '仅限女生') {
        if (this.nannum != 0) {
          return uni.showToast({
            title: '参与人数仅限女生',
            icon: 'none'
          });
        }
        allnum = Number(this.nvnum);
      }
      this.http('/doings/add', {
        organize: this.originzer,
        places: this.place,
        title: this.title,
        content: this.content,
        images: this.banurl.join(),
        doings_cate_id: this.huodongList[this.acttypevalue[0]].id,
        starttime: this.starttime,
        endtime: this.endtime,
        address: this.address,
        shape: this.shape == '男女参加' ? '3' : this.shape == '仅限男生' ? '1' : '2',
        male_num: this.nannum,
        girl_num: this.nvnum,
        num: allnum
      }).then((res) => {
        // console.log('添加活动', res);
        if (res.code == 1) {
          uni.showToast({
            title: '已提交审核状态可在<我的发布>中查询',
            icon: 'none',
            success: () => {
              setTimeout(() => {
                uni.navigateBack();
              }, 1500);
            }
          });
        } else {
          uni.showToast({
            title: res.msg
          });
        }
      });
    },
    //获取互动类型
    getdoingscate() {
      this.http('/index/doingscate').then((res) => {
        // console.log('huodong列席', res);
        this.huodongList = res.data;
        this.acttype = res.data.map((item) => {
          return item.title;
        });
      });
    },
    // 活动类型改变
    acttypechange(e) {
      this.acttypevalue = e.detail.value;
      console.log(this.huodongList[this.acttypevalue[0]]);
    },
    setacttype() {
      this.huodogItme = this.huodongList[this.acttypevalue[0]];
      this.$refs.acttype.close();
    },
    // 开始时间挂边
    starttimechange(e) {
      this.value = e.detail.value;
      console.log(this.year[this.value[0]], this.h[this.value[1]], this.m[this.value[2]]);
    },
    setstarttime() {
      this.starttime = this.year[this.value[0]] + ' ' + this.h[this.value[1]] + ':' + this.m[this.value[2]];
      this.$refs.starttime.close();
    },
    // 结束时间变化
    endtimechange(e) {
      this.endvalue = e.detail.value;
    },
    setendtime() {
      this.endtime = this.year[this.endvalue[0]] + ' ' + this.h[this.endvalue[1]] + ':' + this.m[this.endvalue[2]];

      // 在此处判断结束时间不能小于开始时间
      let firsttiem = this.starttime + ':00';
      let seconftime = this.endtime + ':00';

      console.log(new Date(firsttiem).getTime());
      if (new Date(seconftime).getTime() <= new Date(firsttiem).getTime()) {
        this.endtime = '';
        return uni.showToast({
          title: '结束时间不能小于/等于开始时间',
          icon: 'none'
        });
      }
      this.$refs.endtime.close();
    },
    getNext30Days() {
      let currentDate = new Date(); // 获取当前日期
      let next30Days = [];

      // 循环获取接下来的30天的日期
      for (let i = 0; i < 30; i++) {
        let nextDate = new Date(currentDate);
        nextDate.setDate(currentDate.getDate() + i);
        next30Days.push(nextDate);
      }

      return next30Days;
    }
  }
};
</script>
<style lang="scss" scoped>
.picker-view {
  width: 750rpx;
  height: 300rpx;
  margin-top: 20rpx;
}
.item {
  line-height: 100rpx;
  text-align: center;
}
.container {
  box-sizing: border-box;
  padding: 14rpx 30rpx;
  .pad {
    padding: 28rpx 24rpx;
  }
  .originzer {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    width: 690rpx;
    height: 96rpx;
    padding: 28rpx 24rpx;
    background: #f8f8f8;
    border-radius: 16rpx 16rpx 16rpx 16rpx;
    margin-bottom: 24rpx;
  }
  .btn {
    box-sizing: border-box;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 750rpx;
    height: 156rpx;
    background: #ffffff;
    box-shadow: 0rpx -4rpx 12rpx 2rpx rgba(0, 0, 0, 0.12);
    padding: 8rpx 30rpx;
    z-index: 99;
    .creatact {
      width: 690rpx;
      height: 80rpx;
      text-align: center;
      line-height: 80rpx;
      background: #feff01;
      border-radius: 20rpx 20rpx 20rpx 20rpx;
    }
  }
  .starttime {
    box-sizing: border-box;
    width: 750rpx;
    height: 594rpx;
    background: #ffffff;
    border-radius: 30rpx 30rpx 0rpx 0rpx;
    padding: 30rpx 0;
  }
  .endtime {
    box-sizing: border-box;
    width: 750rpx;
    height: 594rpx;
    background: #ffffff;
    border-radius: 30rpx 30rpx 0rpx 0rpx;
    padding: 30rpx 0;
  }
  .acttype {
    box-sizing: border-box;
    width: 750rpx;
    height: 594rpx;
    background: #ffffff;
    border-radius: 30rpx 30rpx 0rpx 0rpx;
    padding: 30rpx 0;
  }
  .attendpeople {
    box-sizing: border-box;
    width: 750rpx;
    height: 594rpx;
    background: #ffffff;
    border-radius: 30rpx 30rpx 0rpx 0rpx;
    padding: 30rpx 0;
  }
}
</style>
<style>
page {
  background-color: #fff;
}
</style>
